let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let dotBox = box.querySelector(".dot_box");

// 初始化下标
let index = 1;
// 获取上一个操作的index
let lastIndex = 1;
let flag = true; // 设置开关, 默认可以打开
let imgBox=[];
if(localStorage.getItem("obj")!=null){

}

// 获取轮播图数据
// ajax(_method, _url, _callBack, _data)
ajax("GET", "http://studentback.dfbuff.xyz/getMethod", function (res) {
    console.log(res);
    // 遍历数组
    res.result.forEach(function (item, idx) {
        // 渲染图片
        imgBoxUl.innerHTML += `<li><a href="javascript:void(0)"><img src="${item.content}"></a></li>`;
        // 渲染小圆点
        dotBox.innerHTML += `<span class="dot${idx == 0 ? ' dotActive' : ''}" data-index=${idx + 1}></span>`;

        imgBox.push(`${item.content}`);
        // let t=`${item.content}`;
        localStorage.setItem("obj",JSON.stringify(imgBox));
        // console.log(localStorage.getItem("obj"));
    });
    console.log(localStorage.getItem("obj"));


    // 插入克隆的第一张图片到最后一张图片之后的位置
    imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
    // 插入克隆的第四张图片到第一张之前的位置
    imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);


    // 移动到原来第一张图片的位置
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    setTimeout(function () {
        imgBoxUl.style.transition = "0.2s ease-in-out";
    }, 300);


    // 事件代理
    box.addEventListener("click", function (event) {
        // 左箭头
        (event.target.className == "arrow_left") && arrowLeftFn(event.target);
        // 右箭头
        (event.target.className == "arrow_right") && arrowRightFn(event.target);
        // 小圆点
        (event.target.classList.contains("dot")) && dotFn(event.target);
    });

    // 点击右箭头事件
    function arrowRightFn(target) {
        if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${++index}00%)`;
            // 判断是否到达最后一张
            limit(imgBoxUl.children.length - 1, 1);
            // 获取具体span标签
            let rBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
            dotColor(rBtnEvent);
        }
    };

    // 点击左箭头事件
    function arrowLeftFn(target) {
        if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${--index}00%)`;
            // 判断是否是第一张
            limit(0, imgBoxUl.children.length - 2);
            // 获取具体span标签
            let lBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
            dotColor(lBtnEvent);
        }
    };

    // 临界点跳转图片
    function limit(limitIndex, setIndex) {
        // limitIndex 设置限制下标
        // setIndex   设置对于下标
        if (index == limitIndex) {
            index = setIndex;
            imgBoxUl.addEventListener("transitionend", function () {
                // 清除过渡效果, 并且ul恢复位置
                imgBoxUl.style.transition = "none";
                imgBoxUl.style.transform = `translateX(-${index}00%)`;

                // 恢复过渡效果
                // 获取最终样式(被计算的样式)
                window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition-duration");
                imgBoxUl.style.transition = "0.2s ease-in-out";
            })
        }
    };

    // 小圆点点击事件
    function dotFn(target) {
        // 获取自定义属性的值，这个值可以和index对应
        let dataIndex = target.getAttribute("data-index");
        // 操作的值重新赋值到index，那么index就可以更新
        index = dataIndex;
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        // 调用小圆点颜色函数
        dotColor(target);
    };

    // 封装小圆点颜色变化函数
    function dotColor(tag) {
        // console.log(tag);
        tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
        tag.classList.add("dotActive");
        // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
        lastIndex = index;
    };

    // 控制开关
    function flagFn() {
        // 关闭开关
        flag = false;
        imgBoxUl.addEventListener("transitionend", function () {
            flag = true;
        });
    };
}, {
    "type": "图片"
});

